<template>
  <div>
    <div v-if="flag">
      <Form
        ref="formValidate"
        :model="formValidate"
        :rules="ruleValidate"
        :label-width="80"
      >
        <Row justify="space-between">
          <Col span="6">
            <FormItem label="作物编号" prop="cid">
              <Input
                v-model="formValidate.cid"
                placeholder="输入作物编号"
              ></Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="作物名称" prop="name">
              <Input v-model="formValidate.name" placeholder="作物名称"></Input>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="成熟时间" prop="ripetime">
              <InputNumber :min="1" v-model="formValidate.ripetime"></InputNumber>
            </FormItem>
          </Col>
        </Row>
        <Row justify="space-between">
          <Col span="6">
            <FormItem label="保质期" prop="qgp">
              <InputNumber :min="1" v-model="formValidate.qgp"></InputNumber>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="提醒时间" prop="atime">
              <InputNumber :min="1" v-model="formValidate.atime"></InputNumber>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="适宜温度" prop="fittemp">
              <InputNumber
                :min="1"
                :step="1.2"
                v-model="formValidate.fittemp"
              ></InputNumber>
            </FormItem>
          </Col>
        </Row>
        <Row justify="space-between">
          <Col span="6">
            <FormItem label="适宜湿度" prop="fitdam">
              <InputNumber :step="1.2" :min="1" v-model="formValidate.fitdam"></InputNumber>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem label="最大播种次数" prop="maxplan">
              <InputNumber
                :min="1"
                v-model="formValidate.maxplan"
              ></InputNumber>
            </FormItem>
          </Col>
          <Col span="6">
            <FormItem>
              <Button type="primary" @click="handleSubmit('formValidate')"
                >提交</Button
              >
              <Button
                @click="handleReset('formValidate')"
                style="margin-left: 8px"
                >重置</Button
              >
              <Button
                type='error'
                @click="flag=false"
                style="margin-left: 8px"
                >取消</Button
              >
            </FormItem>
          </Col>
        </Row>
      </Form>
    </div>
    <div v-else>
       <Form ref="formInline" :model="formInline" inline>
        <FormItem prop="cid">
            <Input type="text" v-model="formInline.zid" placeholder="作物号">
                <Icon type="md-rose" slot="prepend"/>
            </Input>
        </FormItem>
        <FormItem prop="name">
            <Input type="text" v-model="formInline.zname" placeholder="作物名">
                <Icon type="ios-rose" slot="prepend"/>
            </Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSearch">搜索</Button>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="flag=true">添加</Button>
        </FormItem>
    </Form>
    </div>
  </div>
</template>
<script>
export default {
 
  data() {
    return {
      flag:false,
      formInline:{
        zid:"",
        zname:""
      },
      formValidate: {
        cid: "",
        name: "",
        ripetime: "",
        qgp: "",
        atime: "",
        fittemp: "",
        fitdam: "",
        maxplan: "",
      },
      ruleValidate: {
        cid: [
          {
            required: true,
            message: "请输入作物号",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入作物名称",
            trigger: "blur",
          },
        ],
        ripetime: [
          {
            required: true,
            type: "number",
            message: "输入成熟时间",
            trigger: "change",
          },
        ],

        qgp: [
          {
            required: true,
            type: "number",
            message: "输入保质期",
            trigger: "change",
          },
        ],
        atime: [
          {
            required: true,
            type: "number",
            message: "输入提醒时间",
            trigger: "change",
          },
        ],
      },
    };
  },

  mounted() {
    //   this.axios.get('/api/store').then(r => {
    // 			this.data1 = r.data
    // 			this.loading = false
    // 		}).catch(e => {
    // 			this.$Message.error("e" + e)
    // 		})
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          // this.$Message.success("Success!");
          this.$emit("posts",this.formValidate)
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    handleSearch(){
      this.$emit("search",this.formInline)
    }
  },
};
</script>
